import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import './modalStyle.less'

const mapStateToProps = (state) => {
  return {
    modalContent: state.dynamics.modalContent,
    showModal: state.dynamics.showModal
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: () => dispatch(global.allActions.appActions.openModal('hihi')),
    closeModal: () => dispatch(global.allActions.appActions.closeModal())
  }
}

class ModalDialog extends React.Component<any, any> {
  public constructor(props) {
    super(props)
  }
  
  public componentDidMount() {

  }

  handleClose() {
    if (this.props.modalContent === '创建房间失败,钻石余额不足,请到商城充值') {
      this.props.closeModal()
      window.location.hash = 'Mall'
    } else {
      this.props.closeModal()
    }
  }

  public render() {
    return this.props.showModal ? <div className="dialog-block has-mask full" >
      <div className="mall-content content">
        <div className="full-width title-wrapper">
          {/* <img className="title" src="img/mall/dialog/text-buy.png" alt=""/> */}
          <img onClick={this.props.closeModal.bind(this)} className="close" src="img/mall/dialog/close.png" alt=""/>
        </div>
        <div className="modal-wrapper">
          <div className="modal-content">
            {this.props.modalContent}
          </div>
          <div className="bottom-btn" onClick={this.handleClose.bind(this)}>
            <img className="full-width" src="img/mall/dialog/confirm.png" alt=""></img>
          </div>
        </div>
      </div>
    </div> : null
  }

}
export default connect(mapStateToProps, mapDispatchToProps)(ModalDialog)